<template>
  <div class="page-container-padding">
    <!-- 模块 -->
    <div class="module-box">
      <vab-icon :icon="['fas', 'print']" class="icon"></vab-icon>
      <span class="module-name">期易通交易诊断系统</span>
    </div>
    <div style="display: flex">
      <!-- 申请表单 -->
      <div style="width: 500px; min-width: 500px">
        <el-form
          ref="ApplyForm"
          :model="formData"
          :rules="formRules"
          label-width="100px"
          label-position="right"
        >
          <el-form-item prop="useName" label="客户姓名">
            <el-input
              v-model="formData.useName"
              placeholder="请输入申请账户的姓名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="userAccount" label="客户交易号">
            <el-input
              v-model="formData.userAccount"
              placeholder="请输入申请账户的交易号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="userPhone" label="客户手机号">
            <el-input
              v-model="formData.userPhone"
              placeholder="请输入申请账户的联系手机号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="userEamil" label="客户邮箱">
            <el-input
              v-model="formData.userEamil"
              placeholder="申请结果将发送到此邮箱,请认真填写。"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="linkMsg">
            <el-input
              v-model="formData.linkMsg"
              placeholder="请输入您的联系方式"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="content">
            <el-input
              v-model="formData.content"
              type="textarea"
              :rows="3"
              placeholder="在此填写其他需要说明的事项"
            ></el-input>
          </el-form-item>
          <el-form-item label="正式够买">
            <el-checkbox v-model="formData.isOfficial">
              是(本次申请为正式够买申请才勾选)
            </el-checkbox>
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: flex-end">
          <el-button>取消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="toSubmit">
            确定提交
          </el-button>
        </div>
      </div>
      <!-- 系统说明 -->
      <div style="margin-left: 20px; line-height: 26px">
        <div>
          <div style="color: #006eb0; font-weight: 600">一、产品内容</div>
          <div>
            <p>1. 产品：“期易通-账户交易诊断报告”产品主要是通过客户历史交易账单数据分析其在交易上的相关数据，如账户累计净值、回撤、波动率、盈亏比、胜率、年化收益率等，进行综合分析。账户交易诊断系统是一款可以通过客户自己过往交易数据来查看客户自己交易情况的软件系统。主要针对国内期货交易的历史交易数据进行分析和评价，客户只要有瑞达期货股份有限公司的期货账户及有过交易历史记录，即可查询其历史某一时期的交易诊断报告。</p>
            <p>2.依据：根据客户历史交易的相关数据信息，经过相关计算分析，形成报告，报告中可查看交易中的历史净值走势，各项交易数据如年化收益率、最大回撤、夏谱、胜率、盈亏比、各品种或板块盈亏情况、各周期盈亏数据等。分析数据全面、从横向到纵向的全方位数据解析，并给与综合交易评价和具有建设性的建议。客户了解了“过往的自己（交易）”情况，才能更好地针对性改进自己的交易，从而使得自身交易得到良性促进作用。</p>
            <p>特别提醒：由于投资者过往的交易数据不代表其能够延续或反映其未来实际交易表现，因此报告中分析、评价或建议等可能会影响本产品的实际参考效果，因此提醒您务必谨慎选择使用。</p>
          </div>
        </div>
        <div>
          <div style="color: #006eb0; font-weight: 600">二、收费方式</div>
          <div>
            <p>产品(报告)定价：<br /><span style="color: #fd5516">158/次</span>（提供账户交易诊断报告）<br /><span style="color: #fd5516">498/半年</span>（提供查看账号，期限内不限查看次数）<br /><span style="color: #fd5516">898/年</span>（提供查看账号，期限内不限查看次数）</p>
          </div>
        </div>
        <div>
          <div style="color: #006eb0; font-weight: 600">三、服务时间</div>
          <div>
            <p>提供服务的起始日期，原则上从客户付款并签订完该协议的次日算起，特殊情况需调整时间的以电话或其他约定方式另行确定为准。</p>
          </div>
        </div>
        <div>
          <div style="color: #006eb0; font-weight: 600">四、服务方式</div>
          <div>
            <p>单次购买时，提供单次账户交易诊断【PDF报告】<br />购买半年或以上期限时，提供查询【帐户】和【密码】。</p>
          </div>
        </div>
        <div>
          <div style="color: #006eb0; font-weight: 600">五、关于续订</div>
          <div>
            <p>已订购过本产品的客户如续费延续服务，所有合约条款与本协议一致，无需重复签约。续约时间以电话或者其他方式约定为准</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { CreateZhenduanRecord } from '@/api/prodService/zhenduan'
  export default {
    data() {
      return {
        submitLoading: false,
        formData: {
          useName: '',
          userAccount: '',
          userPhone: '',
          userEamil: '',
          finishTime: new Date(),
          linkMsg: '',
          content: '',
          isOfficial: false,
        },
        formRules: {
          useName: [
            { required: true, message: '请输入客户姓名', trigger: 'change' },
          ],
          userAccount: [
            { required: true, message: '请输入客户交易号', trigger: 'change' },
          ],
          userPhone: [
            {
              required: true,
              message: '请输入客户联系手机号',
              trigger: 'change',
            },
          ],
          userEamil: [
            {
              required: true,
              message: '请选择客户邮箱',
              trigger: 'change',
            },
          ],
        },
      }
    },
    mounted() {},
    methods: {
      toSubmit() {
        this.$refs.ApplyForm.validate((validate) => {
          if (!validate) {
            return
          }
          const formdata = {
            use_name: this.formData.useName,
            use_account: this.formData.userAccount,
            use_phone: this.formData.userPhone,
            use_email: this.formData.userEamil,
            link_msg: this.formData.linkMsg,
            content: this.formData.content,
            is_official: this.formData.isOfficial,
          }
          this.submitLoading = true

          CreateZhenduanRecord(formdata)
            .then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.$refs.ApplyForm.resetFields()
              this.submitLoading = false
            })
            .catch(() => {
              this.submitLoading = false
            })
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .module-box {
    padding: 4px 6px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 5px 5px 0 0;
    margin-bottom: 16px;
    .icon {
      color: #fd5516;
    }
    .module-name {
      margin-left: 10px;
    }
  }
</style>
